@import "typography";

$contributorDiameter: 32px;
$contributorRadius: 16px;

.navbar {
  margin-bottom: 24px;
  height: 54px;

  background: WHITE;

  font-family: $fontSerif;
  font-size: 16px;
  line-height: 1em;

  #docsearch {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);

    .DocSearch-Button-Placeholder {
      width: 150px;

      text-align: left;
    }
  }

  .navbar-collapse {
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    a.home {
      position:absolute;
      left: 50%;
      translateX: -50%;

      color: #444444;

      &:hover {
        color: BLACK;
      }
    }

    .navbar-nav {
      margin-left: 0 !important;
      margin-right: 0 !important;
    }
  }

  .nav-item {
    margin-left: 0.75em;
    margin-right: 0.75em;

    > a.nav-link {
      margin: 0;
      padding: 0;

      color: #545454;

      &:hover {
        color: BLACK;
      }
    }

    .nav-link.active {
      color: #CCCCCC;
    }

    .fa {
      cursor: pointer;

      color: #444444;
      font-size: 18px;

      &:hover {
        color: BLACK;
      }
    }
  }
}

#drawerNav {
  overflow-y: auto;

  padding-top: 48px;
  padding-bottom: 72px;
  padding-left: 48px;
  padding-right: 48px;

  li {
    margin-top: 1.25em;
    margin-bottom: 1.25em;

    a {
      display: block;
    }
  }

  .contributors {
    li {
      margin:0;
      margin-right: 8px;
    }
  }

  .exit {
    position: absolute;

    top: 16px;
    right: 24px;

    color: BLACK;
  }
}

nav.main {
  // Displayed faded by default for low distraction reading of the main content.
  opacity: 0.2;
  transition: opacity 0.3s ease;
  &:hover {
    opacity: 1.0;
  }

  .header {
    display: block;
    margin-top: 0px;
    margin-bottom: 16px;

    font-family: $fontSerif;
    font-size: 24px;
    font-weight: bold;
  }

  ol {
    margin: 0;
    padding: 0;

    list-style-type: none;
  }

  & > ol > li {
    margin-top: 1em;
    margin-bottom: 1em;
  }

  a {
    text-decoration: none;
  }

  .link-group {
    margin-bottom: 25px;

    .title {
      font-weight: bold;
    }

    ol {
      padding-left: 16px;
      border-left: 2px solid #FF8888;

      li {
        margin-top: 0.5em;
        margin-bottom: 0.5em;
      }
    }
  }

  .contributors {
    margin-top: 50px;

    .title {
      display: block;
      margin-bottom: 16px;

      font-weight: bold;

      .count {
        font-size: 0.7em;
      }
    }

    ol {
      display: flex;
      flex-direction: row;
      align-items: center;

      margin: 0;
      padding: 0;
      list-style-type: none;
    }

    .contributor {
      display: block;

      margin: 0;
      margin-right: 8px;

      height: $contributorDiameter;
      padding: 0;

      a {
        display: block;
        width: $contributorDiameter;
        height: $contributorDiameter;
        border-radius: $contributorRadius;

        // Note: We show the contributor photo as a background image because
        //       displaying it as an <img> results in a few extra pixels above
        //       the image that we couldn't get rid of.
        background-size: cover;
        background-repeat: no-repeat;
        background-position: 50% 50%;
      }
    }

    .remaining-count {
      display: block;
      margin: 0;
      padding: 0;

      height: $contributorDiameter;

      .bubble {
        display: block;

        margin: 0;
        padding: 0;

        width: $contributorDiameter;
        height: $contributorDiameter;
        border-radius: $contributorRadius;

        background: RED;

        .count {
          display: block;
          width: $contributorDiameter;
          height: $contributorDiameter;

          text-align: center;
          line-height: $contributorDiameter;
          vertical-align: middle;

          font-size: 10px;
          font-weight: bold;
        }
      }
    }
  }
}

main.page-content {
  padding-left: 48px;
  padding-right: 48px;
  padding-bottom: 72px;

  font-size: 18px;
  font-weight: 100;
  line-height: 1.4em;

  @media(width <= 768px) {
    padding-left: 24px;
    padding-right: 24px;
  }

  header {
    margin-bottom: 48px;
    padding-top: 100px;
    padding-bottom: 100px;
    padding-left: 24px;
    padding-right: 24px;

    text-align: center;
    text-wrap: balance;
  }

  h2, h3, h4, h5, h6 {
    margin-top: 1.8em;
  }
  h2 {
    font-size: 2em;
  }
  h3 {
    font-size: 1.5em;
  }
  h4 {
    font-size: 1.2em;
  }
  h5 {
    font-size: 1em;
  }
  h6 {
    font-size: 0.7em;
  }

  p {
    line-height: 1.6em;
  }
  p + p, ul + p, ol + p, pre + p {
    margin-top: 2em;
  }

  li {
    margin-top: 1em;
  }

  pre {
    margin-top: 2em;
  }
  p + pre {
    // Huge the preceding paragraph because it probably introduced this
    // code block.
    margin-top: 1em;
  }
}

.right-pane {
  // Displayed faded by default for low distraction reading of the main content.
  opacity: 0.2;
  transition: opacity 0.3s ease;
  &:hover {
    opacity: 1.0;
  }

  .content {
    .table-of-contents {
      margin-top: 16px;

      h3 {
        margin-bottom: 0;
        padding-left: 32px;

        font-size: 12px;
        font-weight: bold;
        text-transform: uppercase;
      }

      ol {
        // This style applies to all levels of lists in the ToC.
        margin: 0;
        padding: 0;
        padding-left: 16px;

        list-style-type: none;

        font-size: 14px;
      }

      > ol {
        padding-left: 32px;
        padding-top: 0;
        padding-bottom: 16px;
        padding-right: 0;

        li {
          margin-top: 1em;
          margin-bottom: 1em;

          a {
            text-decoration: none;
          }
        }
      }
    }

    ol.organization-links {
      a {
        display: block;
        margin-top: 8px;
        margin-bottom: 8px;

        border-radius: 8px;
      }

      .fa {
        // Constant width so that icons of different widths still align
        // label text across multiple buttons.
        width: 24px;
      }
    }

    .organization-nav-divider {
      margin-top: 32px;
      margin-bottom: 32px;

      padding: 0;

      height: 1px;
    }
  }
}

footer {
  padding-top: 72px;
  padding-bottom: 72px;
  padding-left: 48px;
  padding-right: 48px;

  text-align: center;

  .built-with {
    font-size: 12px;
    font-weight: bold;
    letter-spacing: 1px;
    text-transform: uppercase;

    a {
      text-decoration: none;
    }
  }
}